HTML Living Standardへの切り替え

以前は多くのホームページがHTML4.01で作成されていましたが2023年10月現在ではHTML Living Standardの最新ヴァージョンが使用されています。
ここでは旧ヴァージョンのHTML4.01から近年多くのホームページが採用している HTML Living Standardへ切り替えるやり方の解説をしていきます。例として動画を掲載していたページの編集の解説です。赤文字は変更箇所になります。

以前ホームページをHTML5で作成した方は比較的容易にHTML Living Standardに切り替える事が可能です。

■ ドキュタイプ宣言の簡略化

まずはHTMLソースの最初の1行のDOCTYPE宣言が簡略化されています。

旧ソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>4.01のHP</title>
</head>
<body>
ようこそわたしのホームページヘ
</body>
</html>

下向き矢印

新ソース

<!DOCTYPE html>
<html>
<head>
<title>HTML Living Standard</title>
</head>
<body>
ようこそわたしのホームページヘ
</body>
</html>

■ ヘッダタグでヘッダ部分であることを示す

旧HTMLの場合、ホームページの上部にある見出しやナビゲーションはテーブルタグや divタグのボックスでくくっていましたがHTML Living Standardではヘッダタグを記述してヘッダ部分であることを示すことができます。

旧ソース

下向き矢印

新ソース

■ ビデオタグで動画ファイルを表示する

以前は以下のように<object>タグを用いて設置して動画を再生していましたが現在では<video>タグでシンプルに再生できます。

旧ソース

下向き矢印

新ソース

■ フッタタグでフッタ部分であることを示す

旧HTMLの場合、ホームページの下部にある問い合わせ先や著作表記は<divタグ>などでくくっていましたがHTML Living Standardでは<footer>タグを記述してフッタ部分であることを示すことができます。

旧ソース

<div id="footer">
Copyright (C) 2000-2023 サイト名 All rights reserved.
<//div>

下向き矢印

新ソース

以上まとめると以下のようになります。一般的なWEBサイトでは下記のlang属性や文字コード指定の記述がされていますが省略することも可能です。

新ソース

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTML Living Standard</title>
</head>
<body>
<header>
<h1>見出し</h1>
</header>
ようこそわたしのホームページヘ
<video src="douga.mp4"></video>
<footer>
Copyright (C) 2000-2023 サイト名 All rights reserved.
</footer>
</body>
</html>

■ HTML Living Standardに切り替えるメリット

HTML Living Standardに切り替えると例として以下のようなメリットがありweb制作の幅が広がります。

HTMLソースを見た際、サイトのヘッダ部分、本文、フッタ部分の場所等が明確にわかる
スマートフォンの最新ブラウザでの閲覧に適している
CSS3を併用すると角丸のボックスを表示できるようになる
メタタグのスタイル言語指定やスクリプト言語指定の記述が不要に

■ 文字コードを指定して保存する

一通りHTML Living Standardでソースを記述できたら文字コードを指定して保存します。
メモ帳の「ファイル」→「名前を付けて保存」から図のようにindex.html とファイル名を入力してファイルの種類はすべてのファイル、文字コードは HTML Living Standard推奨のUTF-8を選択し保存ボタンを押します。

文字コード

以上で基本的な切り替え作業は完了です。
既にHTML5でHPを作成している場合は大きな変更は必要ありません。

Follow @hp_master_2003